<template>
	<div>
		<el-dialog :title="'新增监测设备'" :visible.sync="dialogVisible" width="40%" append-to-body>
			<div>
				<el-form ref="form" :model="form" :rules="rules" label-width="80px">
					<el-form-item label="设备名称" prop="monitorName">
						<el-input placeholder="设备名称" v-model="form.monitorName"></el-input>
					</el-form-item>
					<el-form-item label="设备类型" prop="monitorType">
						<div class="date-item displayFlex">
							<el-select v-model="form.monitorType" filterable remote placeholder="设备类型" style="width:100%">
								<el-option key="CEMS" label="CEMS" value="CEMS" />
								<el-option key="AIR_SITE" label="空气微站" value="AIR_SITE" />
								<el-option key="TSP" label="TSP" value="TSP" />
							</el-select>
						</div>
					</el-form-item>

					<el-form-item label="排口" prop="outletId">
						<div class="date-item displayFlex">
							<el-select v-model="form.outletId" filterable remote placeholder="选择排口"
								@change="form.pollutionList = [],getPollutionList()" style="width:100%">
								<el-option v-for="item in outletList" :key="item.id" :label="item.outletName"
									:value="item.id" />
							</el-select>
						</div>
					</el-form-item>
					<el-form-item label="mn标识" prop="mn">
						<el-input placeholder="mn标识" v-model="form.mn"></el-input>
					</el-form-item>
					<el-form-item label="pw标识" prop="pw">
						<el-input placeholder="pw标识" v-model="form.pw"></el-input>
					</el-form-item>
					<el-form-item label="x轴" prop="xCoords">
						<el-input placeholder="x轴" v-model="form.xCoords"></el-input>
					</el-form-item>
					<el-form-item label="y轴" prop="yCoords">
						<el-input placeholder="y轴" v-model="form.yCoords"></el-input>
					</el-form-item>
					<el-form-item label="z轴" prop="zCoords">
						<el-input placeholder="z轴" v-model="form.zCoords"></el-input>
					</el-form-item>

					<div class="mb20">污染物维护</div>
					<div>
						<div v-for="(item,index) in form.pollutionList" :key="index">
							<el-form-item label="名称" prop="pollutionId">
								<div class="displayFlex">
									<el-select v-model="item.pollutionId" filterable placeholder="名称" style="width: 100%;">
										<el-option v-for="item in dataList1" :key="item.pollutionId" :label="item.pollutionName"
											:value="item.pollutionId">
										</el-option>
									</el-select>

									<span class="ml20" @click="removeTimes(index)">
										<i class="el-icon-remove-outline" style="color: brown;font-size: 22px;"></i>
									</span>
								</div>
							</el-form-item>
						</div>


						<div class="u-type-primary point" style="color:#3a3ef4" @click="form.pollutionList.push({})">
							<span class="mr10">+</span>
							<span>添加污染物</span>
						</div>
					</div>
				</el-form>
			</div>

			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false,form = $options.data().form">取 消</el-button>
				<el-button type="primary" @click="confirmSave">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	let that
	export default {
		props: {
			type: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				year: new Date().getFullYear(),
				dialogVisible: false,
				form: {
					outletId: '',
					outletType: 'WASTE_GAS',
					pollutionList: [{}],
					monitorType: '', // 设备类型code
					monitorName: '', // 监测设备名称
					mn: '', // mn标识
					pw: '', // pw标识
					xCoords: '', // x轴
					yCoords: '', // y轴
					zCoords: '', // z轴
				},
				outletList: [],
				dataList1: [],
				dataList2: [],
				wasteList: [],
				rules: {
					monitorName: [{
						required: true,
						message: '设备名称',
						trigger: 'change'
					}],
					monitorType: [{
						required: true,
						message: '设备类型',
						trigger: 'change'
					}],
					outletId: [{
						required: true,
						message: '请选择排口',
						trigger: 'change'
					}],
					mn: [{
						required: true,
						message: 'pw标识',
						trigger: 'change'
					}],
					pw: [{
						required: true,
						message: 'mn标识',
						trigger: 'change'
					}],
					pollutionList: [{
						required: true,
						message: '请选择污染物',
						trigger: 'change'
					}],
				},
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			//console.log(that.detail)

		},

		methods: {
			open(item) {
				if (item) {
					that.form = item
					that.getPollutionList()
				} else {
					that.form = that.$options.data().form
				}

				that.getGasOutletBaseList()
				//console.log(rewuDetail)
				//if (that.type == 'WASTE_WATER') that.getWaterOutletBaseList()
				//else that.getGasOutletBaseList()
				that.dialogVisible = true
			},

			close() {
				that.dialogVisible = false
				that.form = that.$options.data().form
			},

			confirmSave() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						let api = "onlineMonitor/save"
						that.ajax({
							url: api,
							data: JSON.stringify(that.form),
							contentType: 'application/json',
							success: function(result) {
								if (result.data) {
									that.close()
									that.$emit('refresh')
									return that.$message.success("保存成功")
								}
							},
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},

			getPollutionList() {
				let api = 'gasOutlet/getGasOutletPollutionList'
				if (that.type == 'WASTE_WATER') api = 'waterOutlet/getMonitorPollutionList'
				that.ajax({
					url: api,
					contentType: 'application/x-www-form-urlencoded',
					data: {
						outletId: that.form.outletId
					},
					success: function(result) {
						that.dataList1 = result.data
					},
				})
			},

			removeTimes(index) {
				if (that.form.pollutionList.length == 1) return that.$message.error('至少保留一个')
				that.form.pollutionList.splice(index, 1)
			},

			save() {
				that.ajax({
					url: '/gasSelfMonitor/save',
					data: JSON.stringify(that.form),
					contentType: 'application/json',
					success: function(result) {
						that.$message.success('保存成功')
						that.dialogVisible = false
					},
				})
			},

			getWaterOutletBaseList() {
				that.ajax({
					url: '/waterOutlet/getWaterOutletBaseList?ticketId=' + that.$store.state.token,
					data: JSON.stringify({
						ticketId: that.$store.state.token,
					}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							for (let item of result.data) {
								item.outletName = item.waterOutletName
							}
							that.outletList = result.data
						}
					},
				})
			},

			getGasOutletBaseList() {
				that.ajax({
					url: '/gasOutlet/getOriginalGasOutletBaseList?ticketId=' + that.$store.state.token,
					data: JSON.stringify({
						ticketId: that.$store.state.token,
					}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							for (let item of result.data) {
								item.outletName = item.gasOutletName
							}
							that.outletList = result.data
						}
					},
				})
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>